<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleDownload"
          v-hasPermi="['job:employeeSalary:export']"
        >导出薪资表</el-button>

      <el-button
        type="info"
        plain
        icon="el-icon-view"
        size="mini"
        @click="handleLog"
        v-hasPermi="['job:employeeSalary:log']"
      >查看修改记录</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="salaryDetailList">
      <el-table-column label="姓名" prop="workerName" width="100"/>
      <el-table-column label="身份证" prop="idCard" :show-overflow-tooltip="true" min-width="120"/>
      <el-table-column label="性别" prop="sex" :show-overflow-tooltip="true" min-width="50"  align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.sex === 1">男</div>
          <div v-else-if="scope.row.sex === 2">女</div>
        </template>
      </el-table-column>
      <el-table-column label="手机号"  prop="phoneCode" align="center" min-width="80"/>
      <el-table-column label="班次"  prop="timeShiftName" align="center" width="150"/>
      <el-table-column label="组别"  prop="groupName" align="center" width="150"/>
      <el-table-column label="工资(元)"  prop="salary" align="center" width="150"/>
      <el-table-column label="招聘渠道"  prop="companyName" align="center" width="150"/>
      <el-table-column label="考勤状态"  prop="attendanceStatus" align="center" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.attendanceStatus === 0">未知</div>
          <div v-else-if="scope.row.attendanceStatus === 1">异常</div>
          <div v-else-if="scope.row.attendanceStatus === 2">正常</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['job:employeeSalary:update']"
          >修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-card class="box-card" style="margin-top: 20px">

          <el-descriptions :column="2">
            <el-descriptions-item label="班次">{{info.timeShiftName}}</el-descriptions-item>
            <el-descriptions-item label="组别">{{info.groupName}}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{info.workerName}}</el-descriptions-item>
            <el-descriptions-item label="身份证">{{info.idCard}}</el-descriptions-item>
            <el-descriptions-item label="用工日期">{{info.workTime}}</el-descriptions-item>
            <el-descriptions-item label="考勤状态">{{info.attendanceStatus}}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-row style="margin-top: 20px">
          <el-col :span="12">
            <el-form-item label="应发薪资" prop="newSalary">
              <el-input v-model="form.newSalary"></el-input>
            </el-form-item>
            <el-form-item label="备注"  prop="remark">
              <el-input v-model="form.remark"></el-input>

            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listEmployeeSalaryDetail,exportSalaryBills,updateSalary} from "@/api/job/employeeSalary/employeeSalaryApi";

export default {
  name: "detail.vue",
  created() {
    this.getList();
  },
  data(){
    return{
      // 是否显示弹出层
      open: false,
      title: "修改",
      // 总条数
      total: 0,
      //表格加载遮罩层
      loading: false,
      // 表格数据
      salaryDetailList: [],
      // 日期范围
      dateRange: [],
      info:{},
      // 表单参数
      form: {},

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        salaryDailyTotalId: this.$route.query.salaryDailyId,
        workTime: this.$route.query.workTime,
      },
      // 表单校验
      rules: {
        newSalary: [
          {required: true, type:'number',message: "应发薪资不能为空且为数字", trigger: "blur",transform: (value) => Number(value)}
        ],

        remark:[
          {max: 500, message: '推荐人长度小于500', trigger: 'blur' }
        ]

      }


    };
  },
  methods: {
    getList() {
      this.loading = true;
      listEmployeeSalaryDetail(this.addDateRange(this.queryParams, this.dateRange)).then(
        response => {
          this.salaryDetailList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },

    handleDownload(){
      this.$confirm('确认导出工资明细数据?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportSalaryBills(this.queryParams.salaryDailyTotalId);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });
    },

    handleUpdate(row){
      this.info.timeShiftName=row.timeShiftName;
      this.info.groupName=row.groupName;
      this.info.workerName=row.workerName;
      this.info.idCard=row.idCard;
      if(row.attendanceStatus==0){
        this.info.attendanceStatus="未知";
      }else if(row.attendanceStatus==0){
        this.info.attendanceStatus="异常";
      }else{
        this.info.attendanceStatus="正常";
      }
      this.info.workTime=this.$route.query.workTime;
      this.form.workingDate=this.$route.query.workTime;
      this.form.workerName=row.workerName;
      this.form.idCard=row.idCard;
      this.form.salary=row.salary;
      this.form.attendanceStatus=row.attendanceStatus;
      this.form.salaryDailyTotalId=this.$route.query.salaryDailyId;
      this.form.id=row.id;
  this.open = true;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        salary: null,
        remarks: null,

      };

      this.resetForm("form");

    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {

        if (valid) {

          if(Number(this.form.newSalary) <0 ){
            this.$alert("临时工工资不能小于零，请核对", "提示", {dangerouslyUseHTMLString: true});
            return
          }

            updateSalary(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });

        }
      });
    },
    handleLog() {


      let workTime =this.$route.query.workTime;
      this.$router.push({path:"/finance/salary/employeeSalaryLog",query:{workTime:workTime}});
    },



  }
}
</script>

<style scoped>

</style>
